<template>
    <div class="my-tables">
        <el-tabs type="card" v-model="compState.activeName" class="demo-tabs">
            <el-tab-pane name="first">
                <template #label>
                    <span class="custom-tabs-label">
                        <el-icon>
                            <Grid />
                        </el-icon>&nbsp;
                        <span>车辆实况</span>
                    </span>
                </template>
                <div class="input_search" style="padding: 5px">
                    <el-input v-model="compState.ambulanceInputFilter" placeholder="输入车辆关键字筛选" clearable
                        @input="handleSearchAmbulance" :prefix-icon="Search">
                    </el-input>
                </div>
                <el-table :data="compState.ambUserArrCopy" style="width: 100%; margin-bottom: 20px" max-height="780"
                    height="780" :tree-props="treeProps" row-key="Code" highlight-current-row stripe
                    :header-cell-style="headerCellStyle">
                    <el-table-column prop="Name" label="车辆" show-overflow-tooltip />
                    <el-table-column align="right" width="350">
                        <template #default="scope">
                            <el-button size="small" @click="handleAmbu(scope.row)"
                                :icon="scope.row.userList ? 'View' : 'VideoCameraFilled'">
                                {{ scope.row.userList ? '车载监控' : '单兵设备' }}
                            </el-button>
                            <el-button v-if="scope.row.userList" size="small" @click="linkHeart(scope.row)" icon="Cpu">
                                {{ '心电' }}
                            </el-button>
                            <el-button v-if="scope.row.userList" size="small" @click="link12(scope.row)" icon="Cpu">
                                {{ '12导联' }}
                            </el-button>
                            <el-button v-if="scope.row.userList" size="small" @click="linkBChao(scope.row)" icon="Cpu">
                                {{ 'B超' }}
                            </el-button>

                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
 
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { setupMapState } from "../../../store/utils/hook"
import { GetAmbUserList } from 'network/hosVenAmbuListData';
import { GetDanBingPreVedio } from 'network/danbingVideo';
import { GetMaiRui } from 'network/mairui';
import { ElMessage } from 'element-plus';
import { Search } from '@element-plus/icons-vue'

const treeProps = {
    children: 'userList',
    hasChildren: 'hasChildren',
}
const compState = reactive({
    activeName: ref('first'),
    ambulanceInputFilter: "",
    ambUserArr: [],
    ambUserArrCopy: []
})
const { ACVCodesVx } = setupMapState("app", ["ACVCodesVx"])
const { userInfoVx } = setupMapState("app", ["userInfoVx"])

const handleSearchAmbulance = () => {
    compState.ambUserArrCopy = compState.ambUserArr.filter((item) => {
        return item.Name.search(compState.ambulanceInputFilter) != -1;
    });
}
const handleAmbu = (row) => {
    // console.log(row)
    if (!row.IsAmb) {
        if (row.EquipmentId != null && row.EquipmentId != "") {
            GetDanBingPreVedio({ code: row.EquipmentId })
                .then((res) => {
                    console.log('单兵', res);
                    window.open(res);
                })
                .catch((err) => {
                    ElMessage({ message: '暂无人员单兵！' + err, type: 'warning' });
                });
        } else {
            ElMessage({ message: '暂未绑定设备！', type: 'warning' });
        }
    } else {

        GetDanBingPreVedio({ code: row.Code }).then((res) => {
            console.log('车载', res);
            if (res) {
                window.open(res);
            } else {
                ElMessage({ message: '暂无车载监控！', type: 'warning' });
            }
        })
            .catch((err) => {
                ElMessage({ message: '暂无车载监控！', type: 'warning' });
            });
    }
}
const linkHeart = (row) => {
    console.log(row.Name);
    if (row.Name != '') {
        GetMaiRui({ code: row.Name.substr(0, row.Name.indexOf('[')) }).then((res) => {
            console.log("心电",res);
            window.open(res);
        })
            .catch((err) => {
                ElMessage({ message: '暂无心电！', type: 'warning', });
            });
    } else {
        ElMessage({ message: '请选择！', type: 'warning' });
    }
}
const link12 = (row) => {
    // console.log(row.Name);
    if (row.Name != '') {
        GetMaiRui({ code: row.Name.substr(0, row.Name.indexOf('[')) }).then((res) => {
            // console.log("12导联",res);
            window.open(res);
        })
            .catch((err) => {
                ElMessage({ message: '暂无12导联！', type: 'warning' });
            });
    } else {
        ElMessage({ message: '请选择车辆！', type: 'warning' });
    }
}
const linkBChao = () => {
    window.open("https://meeting.yijulink.com:8889/?token1=GxNvBvMYLEPeAZ9MPGqzxmlRBGL0YqGnXv1Dcao0rOpASVbVHClKicDsXdmXFh3zBGuaXyrgZJunRtNRHWTsTA==&token2=ALIhQ420SO0CHlECyHa8hICXfWW/4WzRxo3HExYxfAQCeGx5seVqA6h1ETzTWwfAb/mdXEBrp4kO5cTJGsRoFLzVXH3uBlCmQO5SvQetLp0v25v27PsZJEEeerlpFXUiQKS52HbRiy8O0GyDOBaFuGI6tvLYWkdpSpwSQREwmR8=");
}
const headerCellStyle = () => {
    return { 'backgroundColor': 'rgba(165, 180, 203, 0.2)' }
}
onMounted(async () => {
    // 判断是否选择了全部的场馆  -1代表的是全部场馆
    if (ACVCodesVx.value.venueCode == -1) {
        ACVCodesVx.value.venueCode = userInfoVx.value.venueCode
    }
    // 1请求车辆人员数据
    let ambUserRequestRes = await GetAmbUserList(ACVCodesVx.value);
    // console.log(ambUserRequestRes);
    // 格式化数据
    ambUserRequestRes.forEach((element) => {
        element.Name = element.Name;
        element.userList.forEach((child) => {
            let type = child.Type == 4 ? "司机" : child.Type == 5 ? "医生" : child.Type == 6 ? "护士" : ""
            child.Name = child.Name + "-" + type + "-" + child.Telephone
        });
    });
    compState.ambUserArr = ambUserRequestRes;
    compState.ambUserArrCopy = [...compState.ambUserArr];
    // console.log(state.ambUserArr);
})
</script>
 
<style scoped></style>